<template>
	<view id="detail">
		<u-subsection v-if="detail.isRectify == 1" :list="topList" mode="button" keyName="title" :current="tab" @change="onTab"></u-subsection>
		<u-subsection v-else :list="topList1" mode="button" keyName="title" :current="tab" @change="onTab"></u-subsection>
		<u--form v-if="tab == 0" :labelStyle="{ color: '#333' }">
			<u-form-item labelWidth="90" label="巡检单号" borderBottom>{{ detail.checkNo }}</u-form-item>
			<u-form-item labelWidth="90" label="项目名称" borderBottom>{{ detail.projectName }}</u-form-item>
			<u-form-item labelWidth="90" label="所属区域" borderBottom>{{ detail.areaName }}</u-form-item>
<!-- 			<u-form-item labelWidth="90" label="上报级别" borderBottom>
				<text v-if="detail.reportAreaName">
					{{ detail.reportAreaName }}
				</text>
			</u-form-item> -->
			<u-form-item labelWidth="90" label="定位" borderBottom>
				<text v-if="detail.locationAddr">
					{{ detail.locationAddr }}
				</text>
			</u-form-item>
			<u-form-item labelWidth="90" label="巡检类型" borderBottom>
				<text v-for="item in typeOpts" :key="item.id" v-if="item.id == detail.type">{{ item.title }}</text>
			</u-form-item>
			<u-form-item v-if="detail && detail.patrolItems[0]" required labelWidth="90" label="施工围挡" borderBottom>
				<u-album :urls="detail.patrolItems[0].images" maxCount="3"></u-album>
			</u-form-item>
			<u-form-item v-if="detail && detail.patrolItems[0]" required labelWidth="90" label="检查内容" borderBottom>
				<text>{{detail.patrolItems[0].content}}</text>
			</u-form-item>
			<u-form-item v-if="detail && detail.patrolItems[1]" required labelWidth="90" label="物料覆盖" borderBottom>
				<u-album :urls="detail.patrolItems[1].images"  maxCount="3"></u-album>
			</u-form-item>
			<u-form-item v-if="detail && detail.patrolItems[1]" required labelWidth="90" label="检查内容" borderBottom>
				<text>{{detail.patrolItems[1].content}}</text>
			</u-form-item>
			<u-form-item v-if="detail && detail.patrolItems[2]" required labelWidth="90" label="车辆冲洗" borderBottom>
				<u-album :urls="detail.patrolItems[2].images" maxCount="3"></u-album>
			</u-form-item>
			<u-form-item v-if="detail.patrolItems && detail.patrolItems[2]" required labelWidth="90" label="检查内容" borderBottom>
				<text>{{detail.patrolItems[2].content}}</text>
			</u-form-item>
			<u-form-item v-if="detail.patrolItems && detail.patrolItems[3]" required labelWidth="90" label="地面硬化" borderBottom>
				<u-album :urls="detail.patrolItems[3].images" maxCount="3"></u-album>
			</u-form-item>
			<u-form-item v-if="detail.patrolItems && detail.patrolItems[3]" required labelWidth="90" label="检查内容" borderBottom>
				<text>{{detail.patrolItems[3].content}}</text>
			</u-form-item>
			<u-form-item v-if="detail.patrolItems && detail.patrolItems[4]" required labelWidth="90" label="湿法作业" borderBottom>
				<u-album :urls="detail.patrolItems[4].images" maxCount="3"></u-album>
			</u-form-item>
			<u-form-item v-if="detail.patrolItems && detail.patrolItems[4]" required labelWidth="90" label="检查内容" borderBottom>
				<text>{{detail.patrolItems[4].content}}</text>
			</u-form-item>
			<u-form-item v-if="detail.patrolItems && detail.patrolItems[5]" required labelWidth="90" label="渣土车密闭" borderBottom>
				<u-album :urls="detail.patrolItems[5].images" maxCount="3"></u-album>
			</u-form-item>
			<u-form-item v-if="detail.patrolItems && detail.patrolItems[5]" required labelWidth="90" label="检查内容" borderBottom>
				<text>{{detail.patrolItems[5].content}}</text>
			</u-form-item>
			<u-form-item v-if="detail.patrolItems && detail.patrolItems[6]" required labelWidth="90" label="其他" borderBottom>
				<u-album :urls="detail.patrolItems[6].images" maxCount="3"></u-album>
			</u-form-item>
			<u-form-item v-if="detail.patrolItems && detail.patrolItems[6]" required labelWidth="90" label="检查内容" borderBottom>
				<text>{{detail.patrolItems[6].content}}</text>
			</u-form-item>
			<u-form-item labelWidth="90" label="备注" borderBottom>
				<view v-if="detail.remark" class="desc">
					{{ detail.remark }}
				</view>
			</u-form-item>
		</u--form>
		<view v-if="tab == 1" class="step">
			<u-steps dot current="1" direction="column">
				<u-steps-item v-for="log in logList" :key="log.id" :title="log.msg" :desc="log.createTime"></u-steps-item>
			</u-steps>
		</view>
		<view v-if="tab == 2" class="rec-content">
			<u--form :labelStyle="{ color: '#333' }">
				<u-form-item labelWidth="90" label="整改回复"></u-form-item>
				<u-form-item borderBottom>
					<view v-if="detail.rectifyResult" class="desc ttcolor">
						{{ detail.rectifyResult }}
					</view>
				</u-form-item>
				<u-form-item labelWidth="90" label="整改后图片" borderBottom>
					<u-album v-if="detail.app_rectify_result_image" :urls="resList" maxCount="3"></u-album>
				</u-form-item>
			</u--form>
		</view>
		<view class="submit-btn">
			<!-- <u-button size="large" v-if="detail.status == 0 || detail.status == 2" type="primary" @click="doAction">操作</u-button> -->
			<text v-if="detail.status == 0 || detail.status == 2" class="btn-add" @click="doAction">操作</text>
			<u-button size="large" v-else disabled type="warning">
				<text v-for="item in statusOpts" :key="item.id" v-if="item.id == detail.status">{{item.title}}</text>
			</u-button>
		</view>
		<u-action-sheet :show="actionShow" :actions="actionsList" @close="actionClose" @select="onSelectAction"></u-action-sheet>
		<u-picker
			closeOnClickOverlay
			:show="userShow"
			:columns="usersOpts"
			@confirm="onUserConfirm"
			@cancel="onUserCancel" 
			@close="onCloseUser"
			keyName="title"
		>
		</u-picker>
		<u-picker
			:show="sendShow"
			:columns="sendOpts"
			@confirm="onSendConfirm"
			@cancel="onSendCancel" 
			@close="onCloseSend"
			keyName="title"
		></u-picker>
		<u-popup :show="modalShow" @close="modalClose" @open="modalOpen">
			<view class="actionForm">
				<u--form :model="form" ref="form1">
					<u-form-item labelWidth="130" label="选择交办人区域" @click="showCity">
						<u--input v-model="form.areaName" disabled disabledColor="#fff" placeholder="选择所属区域" border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item labelWidth="130" label="选择交办人" @click="showUser(1)">
						<u--input v-model="form.userName" disabled disabledColor="#fff" placeholder="选择交办人" border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item labelWidth="130" label="是否抄送" @click="showSend">
						<u--input v-model="form.sendName" disabled disabledColor="#fff" placeholder="选择是否抄送" border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item labelWidth="130" v-if="form.isSend === 0" label="选择抄送人区域" @click="showCity1">
						<u--input v-model="form.areaName2" disabled disabledColor="#fff" placeholder="选择所属区域" border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item labelWidth="130" v-if="form.isSend === 0" label="抄送人" @click="showIsSend">
						<u--input v-model="form.snedPersonName" disabled disabledColor="#fff" placeholder="选择抄送人" border="none">
						</u--input>
						<!-- <rudon-multi-selector welcome="请选择" :is_using_slot="false" :is_using_icon="true" :localdata="csOpts" @change="csChange"></rudon-multi-selector> -->
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
				<view style="padding-top: 200upx">
					<u-button type="primary" @click="onPut">确认指派</u-button>
				</view>
			</view>
		</u-popup>
		<qianziyu-select popupTitle="选择抄送人(多选)" name="title" :showSearch="false" :show="isSendShow" type="checkbox" :dataLists="usersSend" @submit="confirmSend" @cancel="isSendCancel"></qianziyu-select>
		<u-popup :show="endShow" @close="endClose" @open="endOpen">
			<view class="actionForm">
				<u--form :model="endForm" ref="form2">
					<u-form-item labelWidth="100" label="整改回复" v-if="detail.isRectify == 1">
						<u-textarea v-model="endForm.rectifyResult" placeholder="输入整改要求"></u-textarea>
					</u-form-item>
					<u-form-item labelWidth="100" label="整改图片" v-if="detail.isRectify == 1">
						<u-upload :capture="['camera']" :fileList="recList" @delete="deletePic('rec')" name="rec" multiple :width="40" :height="40"
							:maxCount="5" @afterRead="fileUpload"></u-upload>
					</u-form-item>
					<u-form-item>
						<u-button type="primary" @click="onEnd">确认完结</u-button>
					</u-form-item>
				</u--form>
			</view>
		</u-popup>
		<u-popup mode="bottom" :round="10" zIndex="10079" :show="areaShow" @close="onAreaClose">
			<scroll-view :scroll-y="true" :style="{ 'height': '400px' }">
				<select-area type="one" :params="params" @onselect="onSelectArea1"></select-area>
			</scroll-view>
		</u-popup>
		<u-popup mode="bottom" :round="10" zIndex="10079" :show="areaShow1" @close="onAreaClose1">
			<scroll-view :scroll-y="true" :style="{ 'height': '400px' }">
				<select-area type="all" :params="params" @onselect="onSelectArea2"></select-area>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/utils/defaultConfig'
	import { endPatrol, getAllAreaUser, getBusLog, getPatrolDetail, putPatrol, reportPatrol } from '@/api/detail'
	import { AREA_ID, ROLE_KEY, USER_TYPE, ACCESS_TOKEN } from '@/store/mutaction-types'
	import { getAreaList } from '@/api/global.js'
	import apis from '@/api/apis'
	
	export default {
		data () {
			return {
				tab: 0,
				areaShow: false,
				areaShow1: false,
				isSendShow: false,
				endShow: false,
				userShow: false,
				streeShow: false,
				sendShow: false,
				modalShow: false,
				cityLoading: false,
				showArea: false,
				id: '',
				actionShow: false,
				detail: {},
				recList: [],
				resList: [],
				videoUrl: '',
				endForm: {
					rectifyResult: ''
				},
				form: {
					areaId: '',
					areaId2: '',
					areaName: '',
					areaName2: '',
					userId: '',
					userName: '',
					isSend: '',
					sendName: '',
					snedPersonName: '',
					sendPersonId: ''
				},
				actionsList: [
					{
						id: 1,
						name:'交办',
						disabled: false
					},
					// {
					// 	id: 2,
					// 	name:'上报',
					// 	disabled: false
					// },
					{
						id: 3,
						name: '完结',
						disabled: false
					}
				],
				dataList: [],
				cityOpts: [
					[]
				],
				streeOpts: [
					[]
				],
				usersOpts: [
					[]
				],
				usersSend: [
				],
				sendOpts: [
					[
						{
							id: 0,
							title: '抄送'
						},
						{
							id: 1,
							title: '不抄送'
						}
					]
				],
				topList: [
					{
						id: 1,
						title: '详情'
					},
					{
						id: 2,
						title: '日志'
					},
					{
						id: 3,
						title: '整改回复'
					}
				],
				topList1: [
					{
						id: 1,
						title: '详情'
					},
					{
						id: 3,
						title: '日志'
					}
				],
				logList: [],
				problemOpts: config.isProblem,
				rectifyOpts: config.isRectify,
				statusOpts: config.status,
				typeOpts: config.type,
				problemLevOpts: config.problemLevel,
				type: ''
			}
		},
		onLoad (option) {
			this.id = option.id
		},
		mounted () {
			this.getDetail(this.id)
		},
		onPullDownRefresh () {
			this.getDetail(this.id)
			uni.stopPullDownRefresh()
		},
		methods: {
			getLog () {
				getBusLog(this.id).then(res => {
					this.logList = res.data.data
				}).catch(error => {
					uni.$u.toast(error)
				})
			},
			async fileUpload (event) {
				const app = this
				let lists = [].concat(event.file)
				let fileListLen = this[`${event.name}List`].length
				lists.map((item) => {
					this[`${event.name}List`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let result = await this.uploadFilePromise(lists[i].url, 'APP_RECTIFY_RESULT_IMAGE')
					let item = this[`${event.name}List`][fileListLen]
					this[`${event.name}List`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: 'https://bc-p2-file.oss-cn-zhangjiakou.aliyuncs.com/' + result.msg
					}))
					fileListLen++
				}
			},
			uploadFilePromise (url, type) {
				const app = this
				const data = {}
				data['businessId'] = this.id
				data['businessType'] = type
				return new Promise((resolve, reject) => {
					const a = uni.uploadFile({
						url: 'https://p2.xuzhouzhihui.com/api' + apis.Upload,
						filePath: url,
						name: 'file',
						header: {
							'Authorization': 'Bearer ' + uni.getStorageSync(ACCESS_TOKEN)
						},
						formData: data,
						success: res => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 200)
						},
						fail: error => {
							uni.$u.toast(error)
						}
					})
				})
			},
			deletePic(event) {
				this[`${event}List`].splice(event.index, 1)
			},
			doAction () {
				this.actionShow = true
			},
			actionClose () {
				this.actionShow = false
			},
			getDetail (id) {
				uni.showLoading({
					title: '数据加载中'
				})
				getPatrolDetail(id).then(res => {
					const app = this
					const data = res.data.data
					if (data['executePersonId']) {
						app.actionsList[0].disabled = true
						app.actionsList[0].subname = '已交办给' + data['executePersonName']
					} else {
						app.actionsList[0].disabled = false
					}
					if (uni.getStorageSync(ROLE_KEY).filter(item=>{if (item.indexOf('inspector') !==-1) return item}).length>0) {
						this.actionsList[0].disabled = false
						if (data['executePersonId']) {
							app.actionsList[0].disabled = true
							app.actionsList[0].subname = '已交办给' + data['executePersonName']
						} else {
							app.actionsList[0].disabled = false
						}
					} else {
						app.actionsList[0].disabled = true
						app.actionsList[0].subname = '当前级别没有交办权限'
					}
					app.detail = data
					app.getLog()
				}).catch(error => {
					uni.$u.toast(error)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			onSelectAction (e) {
				// 交办
				if (e.id === 1) {
					const areaId = uni.getStorageSync(AREA_ID)
					this.modalShow = true
					// getAllAreaUser(areaId).then(res => {
					// 	const data = res.data.data

					// })
				} else if (e.id === 2) {
					reportPatrol(this.id).then(res => {
						uni.$u.toast('已上报给上级单位')
						uni.$u.sleep(1000).then(res => {
							this.getDetail(this.id)
							this.getLog()
						})
					}).catch(error => {
						uni.$u.toast(error)
						return false
					})
				} else {
					this.endShow = true
				}
			},
			onUserConfirm (e) {
				this.form.userId = e.value[0].id
				this.form.userName = e.value[0].title
				this.onUserCancel()
				this.modalShow = true
			},
			onSendConfirm (e) {
				this.form.isSend = e.value[0].id
				this.form.sendName = e.value[0].title
				this.onSendCancel()
				this.modalShow = true
			},
			onUserCancel () {
				this.userShow = false
			},
			onCloseUser () {
				this.userShow = false
			},
			onSendCancel () {
				this.sendShow = false
			},
			onCloseSend () {
				this.sendShow = false
			},
			modalClose () {
				this.modalShow = false
			},
			modalOpen () {
			},
			showIsSend () {
				if (this.form.areaId2 !== '') {
					getAllAreaUser(this.form.areaId2).then(res => {
						const user = res.data.data[0].users
						if (user.length === 0) {
							uni.$u.toast('当前区域没有可交办的人员')
						} else {
							const users = []
							for (const k in user) {
								const obj = {}
								obj['id'] = user[k].userId
								obj['title'] = user[k].nickName
								users.push(obj)
							}
							this.usersSend = users
							this.isSendShow = true
						}
					})
					
				} else {
					uni.$u.toast('请先选择抄送人区域')
				}
			},
			isSendCancel () {
				this.isSendShow = false
			},
			showCity () {
				this.areaShow = true
			},
			showCity1 () {
				this.areaShow1 = true
			},
			showUser () {
				if (this.form.areaId !== '') {
					getAllAreaUser(this.form.areaId).then(res => {
						const user = res.data.data[0].users
						if (user.length === 0) {
							uni.$u.toast('当前区域没有可交办的人员')
						} else {
							const users = []
							for (const k in user) {
								const obj = {}
								obj['id'] = user[k].userId
								obj['title'] = user[k].nickName
								users.push(obj)
							}
							this.usersOpts[0] = users
							this.usersSend = users
							this.userShow = true
							this.modalClose()
						}
					})
				} else {
					uni.$u.toast('请先选择交办人区域')
					return false
				}
			},
			showSend () {
				this.sendShow = true
				this.modalClose()
			},
			onTab (index) {
				console.log(index)
				this.tab = index
			},
			onPut () {
				const app = this
				const data = {}
				data['id'] = app.id
				data['userId'] = app.form.userId
				data['isSend'] = app.form.isSend
				data['sendPersonId'] = app.form.sendPersonId
				putPatrol(data).then(res => {
					uni.$u.toast('交办成功')
					app.modalClose()
					app.getDetail(app.id)
					app.getLog()
				}).catch(error => {
					uni.$u.toast(error)
				})
			},
			endClose () {
				this.endShow = false
			},
			endOpen () {
			},
			confirmSend (e) {
				if (e.length === 1) {
					this.form.snedPersonName = e[0].title
					this.form.sendPersonId = e[0].id
				} else {
					for (const k in e) {
						if (k == e.length - 1) {
							this.form.snedPersonName += e[k].title
							this.form.sendPersonId += e[k].id
						} else {
							this.form.snedPersonName += e[k].title + ','
							this.form.sendPersonId += e[k].id + ','
						}
					}
				}
				this.isSendShow = false
			},
			onEnd () {
				const app = this
				const data = {}
				data['id'] = app.id
				data['rectifyResult'] = app.endForm.rectifyResult
				if (app.detail.isRectify == 1) {
					if (app.endForm.rectifyResult == '') {
						uni.$u.toast('需填写整改回复')
						return false
					} else {
						endPatrol(data).then(res => {
							uni.$u.toast('交办完成')
							app.endShow = false
							app.getDetail(app.id)
							app.getLog()
						}).catch(error => {
							uni.$u.toast(error)
						})
					}
				} else {
					endPatrol(data).then(res => {
						uni.$u.toast('交办完成')
						app.endShow = false
						app.getDetail(app.id)
						app.getLog()
					}).catch(error => {
						uni.$u.toast(error)
					})
				}
				
			},
			csChange (e) {
				
			},
			onAreaClose () {
				this.areaShow = false
			},
			onAreaClose1 () {
				this.areaShow1 = false
			},
			onSelectArea1 (item) {
				this.form.areaId = item.areaId
				this.form.areaName = item.areaName
				this.onAreaClose()
			},
			onSelectArea2 (item) {
				this.form.areaId2 = item.areaId
				this.form.areaName2 = item.areaName
				this.onAreaClose1()
			}
		}
	}
</script>

<style lang="scss" scoped>
	#detail {
		padding: 10upx 25upx 100upx;
		.step {
			padding: 40upx;
		}
		.desc {
			width: 100%;
			word-wrap: break-word;
		}
		.ttcolor {
			color: $uni-color-error
		}
		.myVideo {
			width: 70px;
			height: 70px;
		}
		.tags-item {
			display: flex;
			flex-direction: row;
		}
		.actionForm {
			padding: 20upx;
		}
		.submit-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
			background-color: #ffffff;
			height: 100upx;
			.btn-add {
				display: block;
				width: 40%;
				height: 72upx;
				line-height: 72upx;
				background-color: #55aaff;
				margin: 18upx auto;
				border-radius: 40upx;
				text-align: center;
				font-size: 32upx;
				color: #fff;
				background-image: linear-gradient(to right, #2595f9, #1eb8ee);
				box-shadow: 0 1px 4px 0px rgba(30,184,238,0.3);
			}
		}
	}
</style>